<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref(1)

const tabs = ref([
  {
    id: 1,
    name: '表格1',
    data: [
      { id: 1, name: '张三', age: 25, job: '工程师' },
      { id: 2, name: '李四', age: 30, job: '设计师' },
    ],
  },
  {
    id: 2,
    name: '表格2',
    data: [
      { id: 3, name: '王五', age: 28, job: '产品经理' },
      { id: 4, name: '赵六', age: 35, job: 'CEO' },
    ],
  },
  {
    id: 3,
    name: '表格3',
    data: [
      { id: 5, name: '钱七', age: 22, job: '实习生' },
      { id: 6, name: '孙八', age: 40, job: 'CTO' },
    ],
  },
])

const columns = ['name', 'age', 'job']
</script>

<template>
  <div class="tab-container">
    <div class="tab-buttons">
      <button v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }" @click="activeTab = tab.id">
        {{ tab.name }}
      </button>
    </div>

    <div class="tab-content">
      <Transition v-for="tab in tabs" :key="tab.id" name="tab-transition" mode="out-in">
        <div v-if="activeTab === tab.id" class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th v-for="col in columns" :key="col">
                  {{ col }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in tab.data" :key="row.id">
                <td v-for="col in columns" :key="col">
                  {{ row[col as 'name' | 'age' | 'job'] }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.tab-container {
  /* max-width: 800px; */
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.tab-buttons {
  display: flex;
  margin-bottom: 20px;
}

.tab-buttons button {
  padding: 8px 16px;
  margin-right: 10px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
}

.tab-buttons button.active {
  background: #42b983;
  color: white;
}

.tab-content {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f8f8f8;
  font-weight: bold;
}

/* 离开动画 */
.tab-transition-leave-active {
  transition: all 0.5s ease;
  position: absolute;
  width: 100%;
}

.tab-transition-leave-to {
  opacity: 0;
  transform: translateY(200px);
}

/* 进入动画 */
.tab-transition-enter-active {
  transition: all 0.5s ease 0.3s;
  /* 延迟0.3s开始 */
}

.tab-transition-enter-from {
  opacity: 0;
  transform: translateX(200px);
}

.tab-transition-enter-to {
  opacity: 1;
  transform: translateX(0);
}
</style>
